<template>
    <van-form @submit="values => $emit('submit', values)">
        <van-field v-model="mobileValue" class="login-mobile-field" name="mobile" label="中国+86" placeholder="请输入手机号" type="tel" center/>
        <van-field v-model="password" type="password" name="password" placeholder="请输入密码" center
                   :rules="[{ required: true, message: '密码不能为空' }]"/>
        <van-button :loading="loading" class="login-button" type="primary" native-type="submit" block>登录</van-button>
    </van-form>
</template>

<script>
  import { Button, Field, Form } from "vant"

  export default {
    name: "MobilePasswordForm",
    components: {
      [Button.name]: Button,
      [Form.name]: Form,
      [Field.name]: Field,
    },
    model: {
      prop: "mobile",
      event: "change-mobile",
    },
    props: {
      loading: Boolean,
      mobile: {
        type: String,
        default: "",
      },
    },
    watch: {
      mobile(mobile) {
        this.mobileValue = mobile
      },
    },
    created() {
      this.mobileValue = this.mobile
    },
    data() {
      return {
        mobileValue: "",
        password: "",
      }
    },
  }
</script>

<style scoped>
    .login-button {
        margin-top: 30px;
    }
</style>
